import React from 'react';
import {
  Picker,
  View,
  Text,
  TouchableOpacity,
  Platform,
} from 'react-native';

import SizeUtils from '../../common/SizeUtils';
import TImage from '../../components/TImage';
import Config from '../../config';
import CommonListPage from '../common/CommonListPage';
import JifenDuihuanItemView from './JifenDuihuanItemView';
import JifenMallItemAction from '../../actions/jifenmall/JifenMallItemAction';
import CommonShowPickerAction from '../../actions/common/CommonShowPickerAction';
import JifenMallConstants from '../../common/JifenMallConstants';

const BIG_BUTTON = [
  {type:"type", value:[0], valueText:["全部分类"], prompt:"分类"},
  {type:"sort", value:[1, 2, 3], valueText:["积分升序", "积分降序", "购买数"], prompt:"排序"},
];

export default class JifenDuihuanPage extends CommonListPage {
  constructor(props) {
    super(props);

    this._headerHeight = SizeUtils.translateDesignHeightToCode(102);
    this._bigButtonWidth = SizeUtils.getWindowSize().width/2;

    this.state.sort_id = JifenMallConstants.ITEM_SORT.jifen_up;
    this.state.type = 0;

    this._isRowWrap = true;
    this._dataKey = "item_id";
  }

  componentWillUpdate(nextProps, nextState) {
    super.componentWillUpdate(nextProps, nextState);

    if(this.state.sort_id != nextState.sort_id || this.state.type != nextState.type) {
      this.state.sort_id = nextState.sort_id;
      this.state.type = nextState.type;
      this._listView.doRefresh();
    }
  }

  _renderTopView() {
    return (
      <View style={{width:SizeUtils.getWindowSize().width,
          height:this._headerHeight, borderColor:"#eeeeee",
          flexDirection:"row",
          borderBottomWidth:SizeUtils.translateDesignNumToCode(3)}}>
          {this._renderBigButton(0)}
          {this._renderBigButton(1)}
      </View>
    )
  }

  _renderBigButton(index) {
    if(Platform.OS === "ios") {
      return this._renderBigButtonIOS(index);
    }
    else {
      return this._renderBigButtonAndroid(index);
    }
  }

  _renderBigButtonIOS(index) {
    let data = BIG_BUTTON[index];
    let selectedValue = "";
    if(data.type === "type") {
      selectedValue = data.valueText[this.state.type];
    }
    else if(data.type === "sort") {
      selectedValue = data.valueText[this.state.sort_id - 1];
    }
    return (
      <TouchableOpacity style={{width:this._bigButtonWidth, height:this._headerHeight,
          flexDirection:"row", justifyContent:"center", alignItems:"center",
          paddingBottom:SizeUtils.translateDesignHeightToCode(10)}}
          onPress={() => this._onPressIOSBigButton(data)}>
        <Text style={{textAlign:"center", fontSize:SizeUtils.translateFontSizeToCode(32),
            }}>
          {selectedValue}
        </Text>
        <TImage source={require("../../../resource/images/jifenmall/duihuan_btn_dropdown.png")}
          style={{width:27, height:16, paddingLeft:SizeUtils.translateDesignWidthToCode(12)}}/>
      </TouchableOpacity>
    )
  }

  _onPressIOSBigButton(data) {
    new CommonShowPickerAction().call(this, {pickerData:data.valueText, callback:(valueText) => {this._editCallback(data, valueText)}});
  }

  _editCallback(data, valueText) {
    let index = data.valueText.indexOf(valueText);
    let value = data.value[index];
    this._onPickerValueChange(value, data);
  }

  _renderBigButtonAndroid(index) {
    let data = BIG_BUTTON[index];
    let selectedValue = "";
    if(data.type === "sort") {
      selectedValue = data.valueText[this.state.type];
    }
    else if(data.type === "sort") {
      selectedValue = data.valueText[this.state.sort_id - 1];
    }
    return (
      <Picker
        style={{width:this._bigButtonWidth, height:this._headerHeight}}
        selectedValue={selectedValue}
        onValueChange={(value) => this._onPickerValueChange(value, data)}
        // mode={"dropdown"}
        prompt={data.prompt}>
        {data.value.map(
          (value, index) => {return this._renderPickerItem(data, index);}
        )}
      </Picker>
    )
  }

  _onPickerValueChange(value, data) {
    if(data.type === "sort") {
      if(this.state.sort_id != value) {
        this.setState({
          sort_id:value,
        });
      }
    }
    else if(data.type === "type"){
      if(this.state.type != value) {
        this.setState({
          type:value,
        });
      }
    }
  }

  _renderPickerItem(data, index) {
    return <Picker.Item key={index} label={data.valueText[index]} value={data.value[index]}/>;
  }

  _requestData(page, listView) {
    new JifenMallItemAction().call(listView, {page:page, page_size:10,
      sort_id:this.state.sort_id, tag:JifenMallConstants.ITEM_TAG.on});
  }

  _onRenderItem(data, index) {
    return <JifenDuihuanItemView data={data} key={index} index={index}/>
  }

  _getListViewStyle() {
    return {
        width:SizeUtils.getWindowSize().width,
        height:SizeUtils.getWindowSize().height - Config.paddingTop - SizeUtils.translateDesignHeightToCode(40) - this._headerHeight,
        backgroundColor:"#ffffff00"};
  }
}
